<template>
  <div class="layout">
    <Layout>
      <Header class="layout_head"> 
        <Menu mode="horizontal" theme="dark" active-name="1" @on-select="MenuDo">
          <div class="layout-logo">
            <!-- <img src="./static/img/logo.png" alt=""> -->
            12121212
            </div>
            <div class="layout-nav">
              
              <MenuItem name="logout" class="menuItem-nav">退出</MenuItem>
              <MenuItem name="username" class="menuItem-nav">{{userInfo.username}}</MenuItem>
            </div>
        </Menu>
      </Header>
      <Content class="layout-content">
        <router-view></router-view>
      </Content>
      <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
    </Layout>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return { c: 11 };
  },
  methods: {
    MenuDo(name) {
      switch (name) {
        case "logout":
          window.localStorage.removeItem("userInfo");
          this.$router.push({ name: "login" });
          this.$Message.error("您已退出成功");
          break;
        default:
          break;
      }
    }
  },
  computed: {
    userInfo() {
      let one = window.localStorage.userInfo;
      return JSON.parse(one)[0];
    }
  }
};
</script>
<style lang="less" scoped>
.layout {
  @topH: 40px;
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
  .layout_head {
    height: @topH;
    overflow: hidden;
    .layout-logo {
      // background: #5b6270;
      border-radius: 3px;
      float: left;
      position: relative;
    }
    .layout-nav {
      width: 50%;
      margin: 0 auto;
      margin-right: 20px;
      .menuItem-nav {
        line-height: @topH;
        float: right;
      }
    }
  }
  .layout-content {
    height: 600px;
    min-height: 600px;
  }
  .layout-footer-center {
    text-align: center;
  }
}
</style>